<template>
	<view class="topicItem">
	    <view class="title font15 txtsHidden" @click="questionDetail(item.id)">
            <block v-if="item.tags.length>0">
                <text class="questionTag col-fff font12 right-5" :style="{backgroundColor: isAll?'#'+item.tags[0].color:'#'+bgColor}">{{isAll?item.tags[0].label:tagName}}</text>
            </block>
	        <text class="fontBold">{{item.content}}</text>
	    </view>
        <block v-if="item.answer">
            <view class="userInfo flex font13 top-15" @click="questionDetail(item.id)">
                <image class="userHeader right-5" :src="item.answer.user_image" mode="aspectFill"></image>
                <text class="userName txtHidden right-5">{{item.answer.user_nick}}</text>
            </view>
            <view class="answerBox top-15" v-if="item.answer.id" @click="questionDetail(item.id)">
                <text class="answerIcon col-fff bg-theme font12 right-5">答</text>
                {{item.answer.content}}
            </view>
        </block>
        <view class="viewsBox flex top-15">
            <view class="viewsBtns flex font13">
                <block v-if="item.review === 0">
                    <view class="right-15 flex" @click="clickThumb(item)">
                        <u-icon :name="item.love?'thumb-up-fill':'thumb-up'" :color="item.love?'#007235':'#3E3A3A'" size="16"></u-icon>
                        <text class="left-3">{{item.like_num}}</text>
                    </view>
                    <view class="right-15 flex" @click="clickCollect(item)">
                        <u-icon :name="item.store?'star-fill':'star'" :color="item.store?'#007235':'#3E3A3A'" size="16"></u-icon>
                        <text class="left-3">{{item.store_num}}</text>
                    </view>
                    <view class="right-15 flex" @click="questionDetail(item.id)">
                        <u-icon name="chat" color="#3E3A3A" size="16"></u-icon>
                        <text class="left-3">{{item.count}}</text>
                    </view>
                </block>
                <view class="flex" @click="clickDelete(item.id)" v-if="showDelete">
                    <u-icon name="trash" color="#3E3A3A" size="16"></u-icon>
                    <text class="left-3">删除</text>
                </view>
            </view>
            <view class="lookAnswerBtn font13 col-primary">{{item.review===0?'审核通过':item.review===1?'审核中':'审核未通过'}}</view>
        </view>
	</view>
</template>

<script>
    import { mapState } from 'pinia';
    import { useUserInfoStore } from '@/store/index';
    import { checkLogin, checkUserInfo } from '@/common/common';
    import { FAQThumbsUp, FAQCollect, deleteOwnerFAQ } from '@/common/api/forum';
	export default {
		data() {
			return {
			}
		},
		props:{
			item: {
				value: Object,
				default: {}
			},
            index: {
                value: Number,
                default: 0
            },
            isAll: {
                value: Boolean,
                default: true
            },
            tagName: {
                value: String,
                default: ''
            },
            bgColor: {
                value: String,
                default: '007235'
            },
            showDelete: {
                value: Boolean,
                default: false
            }
		},
        computed: {
            ...mapState(useUserInfoStore, ['userInfo'])
        },
		methods:{
            //跳转问答详情
            questionDetail(id) {
                if(!checkLogin()) {
                    uni.navigateTo({
                        url: '/pages/login/login'
                    })
                    return
                }
                if(!checkUserInfo()) {
                    uni.navigateTo({
                        url: `/pages/login/user-info-form`
                    })
                    return
                }
                uni.navigateTo({
                    url: `/pages/tools/question/detail?id=${id}`
                })
            },
            
            //点击收藏
            async clickCollect(info) {
                if(!checkLogin()) {
                    uni.navigateTo({
                        url: '/pages/login/login'
                    })
                    return
                }
                if(!checkUserInfo()) {
                    uni.navigateTo({
                        url: `/pages/login/user-info-form`
                    })
                    return
                }
                try {
                    const { status, detail } = await FAQCollect(info.id)
                    if (status !== 0) {
                        uni.$u.toast(detail);
                        return;
                    }
                    this.$emit('collectSucc', this.index)
                } catch (error) {
                    console.log(error)
                }
            },
            
            //点击点赞
            async clickThumb(info) {
                if(!checkLogin()) {
                    uni.navigateTo({
                        url: '/pages/login/login'
                    })
                    return
                }
                if(!checkUserInfo()) {
                    uni.navigateTo({
                        url: `/pages/login/user-info-form`
                    })
                    return
                }
                try {
                    const { status, detail } = await FAQThumbsUp(info.id)
                    if (status !== 0) {
                        uni.$u.toast(detail);
                        return;
                    }
                    this.$emit('thumbSucc', this.index)
                } catch (error) {
                    console.log(error)
                }
            },
            
            //点击删除
            async clickDelete(id) {
                const that = this;
                uni.showModal({
                	title: '提示',
                	content: '是否确认删除?',
                	success: async function (res) {
                		if (res.confirm) {
                            try {
                                const { status, detail } = await deleteOwnerFAQ(id)
                                if(status !== 0) {
                                    uni.$u.toast(detail);
                                    return;
                                }
                                that.$emit("deleteSucc", id)
                            } catch (error) {
                                console.log(error)
                            }
                        }
                    }
                })
            }
		}
	}
</script>

<style scoped lang="scss">
    .topicItem{
        padding: 28rpx;
        border-bottom: 2rpx solid rgba(0,0,0,.06);
        .title{
            line-height: 1.5;
            .questionTag{
                border-radius: 6rpx;
                padding: 4rpx 10rpx;
            }
        }
        .userInfo{
            line-height: 1.4;
            justify-content: flex-start;
            .userHeader{
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
            }
        }
        .answerBox{
            line-height: 1.5;
            .answerIcon{
                line-height: 1;
                display: inline-block;
                padding: 6rpx;
                border-radius: 4rpx;
            }
        }
        .authBtn{
            font-size: 26rpx;
        }
        .viewsBox{
            justify-content: space-between;
            .viewsBtns{
                justify-content: flex-start;
            }
            .lookAnswerBtn{
                padding: 10rpx 20rpx;
                border: 2rpx solid rgba(95, 125, 243, .3);
                border-radius: 10rpx;
            }
        }
    }
</style>
